<template>
    <!-- 自己封装的组件
       1：内容：
    -->
     <div class="topSelectBox w-flex2">
           <div :class=" selectIndex==index?'aitem' :'item'" v-for="(item,index) in navList" :key="index"  @click="change(item,index)">{{ item }}</div>
     </div>
</template>

<script setup lang="ts">
    import {ref} from 'vue'
  let navList:any= ['今天','昨日','最近一个礼拜','最近一个月']
   let selectIndex =ref(100) 
   let emits = defineEmits(['getTimeN'])
  const change = (item:string,index:number)=>{
    selectIndex.value = index  //改变样式
    //把数据给父组件
    emits('getTimeN',item)
  }
</script>

<style scoped lang="scss">
   .topSelectBox{
    margin-left:10px;
    .item{
        padding:5px 5px;
    }
    .aitem{
        padding:5px 5px;
        color:blue;
    }
   }
</style>